<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可爱桌面宠物</title>
    <link rel="stylesheet" href="pet-styles.css">
</head>
<body>
<div id="pet-container">
    <div id="pet">
        <div class="pet-ear left"></div>
        <div class="pet-ear right"></div>
        <div class="pet-body">
            <div class="pet-eye left">
                <div class="pupil"></div>
            </div>
            <div class="pet-eye right">
                <div class="pupil"></div>
            </div>
            <div class="pet-mouth"></div>
        </div>
        <div class="pet-limb left"></div>
        <div class="pet-limb right"></div>
        <div class="pet-tail"></div>
        <div class="bubble" id="speech-bubble">你好！</div>
    </div>
    <!-- 在宠物容器内添加设置按钮 -->
    <div class="settings-btn" id="settings-btn">⚙️</div>
    <div class="status-bar">
        <div class="status-item"><i>❤️</i> <span id="happiness">100</span></div>
        <div class="status-item"><i>🍖</i> <span id="hunger">100</span></div>
    </div>
    <div class="menu" id="context-menu">
        <button id="feed-btn">喂食</button>
        <button id="play-btn">玩耍</button>
        <button id="sleep-btn">睡觉</button>
        <button id="close-btn">关闭宠物</button>
    </div>
</div>

<script src="pet-script.js"></script>
</body>
</html>